<template>
    <el-select v-model="selectedValue" :filterable="filterable" :placeholder="placeholder" :disabled="disabled" clearable
        @change="handleChange">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
</template>

<script>
export default {
    name: 'StbprpSelect',
    props: {
        // 选中的值，支持双向绑定
        value: {
            type: [String, Number, Boolean],
            default: ''
        },
        // 选项数据
        options: {
            type: Array,
            default: () => [],
            // 验证选项格式
            validator: (value) => {
                return value.every(item =>
                    item.hasOwnProperty('label') && item.hasOwnProperty('value')
                )
            }
        },
        // 是否可过滤
        filterable: {
            type: Boolean,
            default: true
        },
        // 占位文本
        placeholder: {
            type: String,
            default: '请选择'
        },
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        // 处理v-model双向绑定
        selectedValue: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            }
        }
    },
    created() {
        this.getOptions()
    },
    methods: {
        // 选中值变化时触发
        handleChange(val) {
            this.$emit('change', val)
        },
        getOptions() {
            this.$request({
                url: '/baseApi/st_stbprp_b/list',
                method: 'get',
                params: {
                }
            }).then((res) => {
                if (res.code === 200) {
                    this.options = res.data.map(item => {
                        return {
                            value: item.stcd,
                            label: item.stnm
                        }
                    })
                }
            })
        }
    }
}
</script>

<style scoped>
/* 可以根据需要添加组件的样式 */
::v-deep .el-select {
    width: 100%;
}
</style>
